<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react</title>
  </head>
  <body>
    <!-- 2. 准备一个根容器：将来React内容都会渲染到容器内部 -->
    <div id="root"></div>

    <!-- 1. 引入 react 相关的库：注意引用顺序 -->
    <!-- 引入 react 库，暴露 React 函数对象 -->
    <script src="./lib/react.development.js"></script>
    <!-- 引入 react-dom 库，暴露 ReactDOM 函数对象 -->
    <script src="./lib/react-dom.development.js"></script>

    <script>
      // 3. 创建 React 元素
      const element = React.createElement(
        "h1", // 元素类型
        { id: "title", title: "这是一个标题" }, // 元素属性
        "Hello React!" // 元素内容
      );
      console.log(element);
      // 4. 将 React 元素渲染到根容器中
      const root = ReactDOM.createRoot(document.getElementById("root")); // 创建 root 节点
      root.render(element); // 将 element 元素渲染 root 节点中
    </script>
  </body>
</html>
